import { useEffect, useContext } from 'react';
import { Button } from 'antd-mobile';
import { ThunderboltFilled } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { ContentType } from "../../constants";
import { globalJump } from '../../utils';
import { MySdkStoreContext } from '../../context';
import { observer } from "mobx-react-lite";

import './style.scss';

export default observer(function(props) {
  const { cid, from, msgContent, msgType } = props;
  const mySdkStore =  useContext(MySdkStoreContext);
  let timer;

  useEffect(() => {
    // 新消息提示展示5s后，自动关闭
    timer = setTimeout(() => {
      mySdkStore.setNewMessageTopBarProps({
        visible: false
      });
    }, 5000);

    return () => {
      clearTimeout(timer);
    }
  }, []);

  // 点击”查看“按钮，进入聊天窗
  const handleCheck = () => {
    globalJump(`#/chatDetail/${cid}`);
    mySdkStore.setNewMessageTopBarProps({
      visible: false
    });
  }

  return <div className="newStrongReminderComponent">
    <div className="topBarTitle">
      <ThunderboltFilled style={{ marginRight: 8, color: '#0091FF', fontSize: 20 }} />
      应用内提醒
    </div>
    <div className="mainContent">
    {from?.userName || from?.userId }{ msgType === ContentType.Text ? `：${msgContent.text}` : '发来一条提醒' }
    </div>
    <div className="bottonBar">
      <Button size="mini" style={{ float: 'right' }} color="primary" onClick={handleCheck}>立即查看</Button>
    </div>
  </div>
})
